<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 160 160"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><path d="M5.39 77.846a19.551 19.551 0 0 0 6.473 12.151 19.477 19.477 0 0 0 12.863 4.855 19.48 19.48 0 0 0 12.864-4.855 19.551 19.551 0 0 0 6.472-12.151H5.391Zm105.36 39.336a3.035 3.035 0 0 1-.88 2.144 3.006 3.006 0 0 1-2.134.891H51.395c-1.655 0-3.02-1.361-3.02-3.035a3.015 3.015 0 0 1 3.02-3.005h56.338a3.01 3.01 0 0 1 3.017 3.005Zm-62.046 4.582h61.719v8.736h-61.72v-8.736Zm67.234-43.918a19.553 19.553 0 0 0 6.466 12.162 19.475 19.475 0 0 0 12.868 4.863 19.46 19.46 0 0 0 12.866-4.862 19.533 19.533 0 0 0 6.459-12.163h-38.659Zm37.596-6.08L137.7 49.912h8.465c2.06 0 3.718-1.692 3.718-3.783 0-2.073-1.661-3.746-3.718-3.746h-44.841a22.249 22.249 0 0 0-6.591-9.446 22.185 22.185 0 0 0-10.424-4.874V16.27a3.753 3.753 0 0 0-3.76-3.77l-.35.04-.35-.04a3.738 3.738 0 0 0-2.66 1.102 3.754 3.754 0 0 0-1.094 2.668v11.787a22.172 22.172 0 0 0-10.421 4.874 22.236 22.236 0 0 0-6.588 9.446h-44.85c-2.044 0-3.711 1.673-3.711 3.746 0 2.094 1.667 3.783 3.711 3.783h8.079L6.478 71.76H4.5v4.037h40.462V71.76h-1.987L27.144 49.912h36.75c0-.854.094-1.692.22-2.494.13-.378.218-.762.218-1.159a16.096 16.096 0 0 1 4.214-7.606 16.046 16.046 0 0 1 7.55-4.295v41.448h-.158c-.323 15.59-7.725 29.187-18.706 36.828h45.946c-10.983-7.641-18.38-21.237-18.72-36.828h-.145V34.358a16.043 16.043 0 0 1 7.547 4.296 16.092 16.092 0 0 1 4.212 7.605c.013.397.094.781.227 1.16.12.804.196 1.64.196 2.493h36.367l-15.837 21.854h-1.975v4.037h40.45v-4.037h-1.966Zm-130.416 0H10.48l12.638-17.445v17.445Zm3.235 0V54.321L38.99 71.766H26.353Zm107.306 0h-12.644l12.644-17.445v17.445Zm3.22 0V54.321l12.653 17.445h-12.653ZM28.482 37.123a3.765 3.765 0 0 1-1.136 2.591 3.75 3.75 0 0 1-5.233 0 3.765 3.765 0 0 1-1.136-2.59 3.77 3.77 0 0 1 3.76-3.771c2.066-.003 3.745 1.694 3.745 3.77Zm110.544-.2a3.737 3.737 0 0 1-3.751 3.75 3.72 3.72 0 0 1-3.469-2.31 3.74 3.74 0 0 1-.282-1.44 3.778 3.778 0 0 1 1.044-2.757 3.753 3.753 0 0 1 4.178-.854 3.753 3.753 0 0 1 2.039 2.127c.179.473.261.978.241 1.485Z" data-follow-stroke="#fff" :stroke="_stroke"/><path fill="#fff" d="M35.5 121.5c0-8.837 7.163-16 16-16s16 7.163 16 16-7.163 16-16 16-16-7.163-16-16Z"/><path fill="#A738FF" d="M52.07 109.567c0-.52 0-.778.166-.938.17-.161.402-.141.87-.1a12.07 12.07 0 0 1 5.84 2.126 12.821 12.821 0 0 1 4.139 4.808 13.504 13.504 0 0 1 1.412 6.3 13.47 13.47 0 0 1-1.662 6.233 12.753 12.753 0 0 1-4.327 4.624 12.03 12.03 0 0 1-5.92 1.869 11.969 11.969 0 0 1-6.047-1.348 12.603 12.603 0 0 1-4.679-4.231c-.269-.403-.401-.604-.352-.836.05-.232.265-.36.694-.62l9.349-5.65c.252-.152.379-.228.447-.354.07-.125.07-.279.07-.585v-11.298Z"/><path fill="#002F5C" d="M51.5 103.883c-9.73 0-17.617 7.887-17.617 17.617s7.887 17.617 17.617 17.617 17.617-7.887 17.617-17.617-7.887-17.617-17.617-17.617Zm-26 17.617c0-14.359 11.64-26 26-26s26 11.641 26 26-11.64 26-26 26-26-11.641-26-26Z" clip-rule="evenodd" fill-rule="evenodd"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Frame34652884 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
